<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">assignment</i>
          </div>
          <div class="card-content">
            <h4 class="card-title">所有账号</h4>
          </div>
          <div class="card-content">
            <!-- Main row -->
            <div class="box-header">
              <div class="box-tools pull-right form-inline">
                <span class="input-group hidden-xs hidden-sm" style="width:200px">
                  <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="searchKeywords">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="clearKeywords()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="清空关键词">
                      <i class="fa fa-eraser"></i>
                    </button>
                    <button class="btn btn-default btn-sm" type="button" (click)="displayData()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="搜索">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </span>
                <button type="button" class="btn btn-info btn-sm" (click)="displayData()" data-container="body" data-toggle="popover" data-trigger="hover"
                  data-placement="top" data-content="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
                <button *ngIf="showAdd" type="button" class="btn btn-success btn-sm" (click)="toAdd()">添加</button>
                <button *ngIf="showModify" type="button" class="btn btn-warning btn-sm" (click)="toModify()">修改</button>
                <button *ngIf="showDelete" type="button" class="btn btn-danger btn-sm" (click)="toDelete()">删除</button>
              </div>
            </div>
            <!-- /.box-header -->
            <table class="table">
              <thead class="text-primary">
                <tr>
                  <th style="width:20px">
                    <input type="checkbox" (click)="checkAll()" [(ngModel)]="checkedAll">
                  </th>
                  <th (click)="sort('userId')" [class.sorting]="orderBy!='userId'" [class.sorting_asc]="orderBy=='userId'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='userId'&&orderType=='desc'">用户id</th>
                  <th (click)="sort('username')" [class.sorting]="orderBy!='username'" [class.sorting_asc]="orderBy=='username'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='username'&&orderType=='desc'">用户名</th>
                  <th (click)="sort('realname')" [class.sorting]="orderBy!='realname'" [class.sorting_asc]="orderBy=='realname'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='realname'&&orderType=='desc'" class="hidden-xs">真实姓名</th>
                  <th (click)="sort('nickname')" [class.sorting]="orderBy!='nickname'" [class.sorting_asc]="orderBy=='nickname'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='nickname'&&orderType=='desc'" class="hidden-xs hidden-sm">昵称</th>
                  <th (click)="sort('email')" [class.sorting]="orderBy!='email'" [class.sorting_asc]="orderBy=='email'&&orderType=='asc'" [class.sorting_desc]="orderBy=='email'&&orderType=='desc'"
                    class="hidden-xs hidden-sm">电子邮箱</th>
                  <th (click)="sort('cellphone')" [class.sorting]="orderBy!='cellphone'" [class.sorting_asc]="orderBy=='cellphone'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='cellphone'&&orderType=='desc'" class="hidden-xs hidden-sm">手机</th>
                  <th (click)="sort('createdTime')" [class.sorting]="orderBy!='createdTime'" [class.sorting_asc]="orderBy=='createdTime'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='createdTime'&&orderType=='desc'" class="hidden-xs hidden-sm">创建时间</th>
                  <th (click)="sort('isLocked')" [class.sorting]="orderBy!='isLocked'" [class.sorting_asc]="orderBy=='isLocked'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='isLocked'&&orderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                  <!--
                    <th class="hidden-xs hidden-sm hidden-md">所属集团</th>
                  -->
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let user of users">
                  <td style="width:20px">
                    <input type="checkbox" (click)="check()" value="{{user.userId}}" class="user-list">
                  </td>
                  <td>{{user.userId}}</td>
                  <td>{{user.username}}</td>
                  <td class="hidden-xs">{{user.realname}}</td>
                  <td class="hidden-xs hidden-sm">{{user.nickname}}</td>
                  <td class="hidden-xs hidden-sm">{{user.email}}</td>
                  <td class="hidden-xs hidden-sm">{{user.cellphone}}</td>
                  <td class="hidden-xs hidden-sm">{{user.createdTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{user.isLocked}}</td>
                  <!--
                  <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.groupName}}</td>
                  -->
                  <td>
                    <button *ngIf="showUserJobRoles" type="button" class="btn btn-xs btn-warning" (click)="manageUserJobRoles(user.userId,user.realname)">管理职位Roles</button>
                    <button *ngIf="!user.isLocked&&showLock" (click)="lock(user.userId)" type="button" class="btn btn-xs btn-danger">锁定</button>
                    <button *ngIf="user.isLocked&&showUnlock" (click)="unlock(user.userId)" type="button" class="btn btn-xs btn-success">解锁</button>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- /.box-body -->
            <div class="box-footer clearfix no-border">
              <div class="pull-right">
                <app-pagination [pageNo]="pageNo" [pageSize]="pageSize" [totalPages]="totalPages" [total]="total" (pageNoChange)="goToPage($event)"
                  (pageSizeChange)="setPageSize($event)"></app-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加帐号</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          用户名：
          <input type="text" id="to-add-username" class="form-control" placeholder="请输入用户名" [(ngModel)]="toAddUsername">
        </div>
        <div class="form-group form-inline">
          密码：
          <input type="password" id="to-add-password" class="form-control" placeholder="请输入密码" [(ngModel)]="toAddPassword">
        </div>
        <div class="form-group form-inline">
          真实姓名：
          <input type="text" id="to-add-realname" class="form-control" placeholder="请输入真实姓名" [(ngModel)]="toAddRealname">
        </div>
        <div class="form-group form-inline">
          昵称：
          <input type="text" id="to-add-nickname" class="form-control" placeholder="请输入昵称" [(ngModel)]="toAddNickname">
        </div>
        <div class="form-group form-inline">
          Email：
          <input type="text" id="to-add-email" class="form-control" placeholder="请输入Email" [(ngModel)]="toAddEmail">
        </div>
        <div class="form-group form-inline">
          手机：
          <input type="text" id="to-add-cellphone" class="form-control" placeholder="请输入手机号" [(ngModel)]="toAddCellphone">
        </div>
        <div class="form-group form-inline">
          生日：
          <mat-input-container>
            <input id="to-add-birthday" matInput [matDatepicker]="toAddBirthdayPicker" [(ngModel)]="toAddBirthday" placeholder="请选择日期"
              disabled>
          </mat-input-container>
          <mat-datepicker-toggle matSuffix [for]="toAddBirthdayPicker"></mat-datepicker-toggle>
          <mat-datepicker #toAddBirthdayPicker [touchUi]="'touch'" [startView]="'month'" disabled="false">
          </mat-datepicker>
        </div>
        <div class="form-group form-inline">
          性别：
          <mat-form-field>
            <mat-select id="to-add-gender" [(ngModel)]="toAddGender" placeholder="性别">
              <mat-option value="（未知）">
                （未知）
              </mat-option>
              <mat-option value="男">
                男
              </mat-option>
              <mat-option value="女">
                女
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <div class="form-group form-inline">
        头像：
        <input type="text" id="to-add-portrait-url" class="form-control" placeholder="请输入头像Url" [(ngModel)]="toAddPortraitUrl">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="add()">添加</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modifyModalLabel">修改帐号</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          用户名：
          <input type="text" id="to-modify-username" class="form-control" placeholder="请输入用户名" [(ngModel)]="toModifyUsername" readonly>
        </div>
        <div class="form-group form-inline">
          密码：
          <input type="password" id="to-modify-password" class="form-control" placeholder="请输入密码" [(ngModel)]="toModifyPassword">
        </div>
        <div class="form-group form-inline">
          真实姓名：
          <input type="text" id="to-modify-realname" class="form-control" placeholder="请输入真实姓名" [(ngModel)]="toModifyRealname">
        </div>
        <div class="form-group form-inline">
          昵称：
          <input type="text" id="to-modify-nickname" class="form-control" placeholder="请输入昵称" [(ngModel)]="toModifyNickname">
        </div>
        <div class="form-group form-inline">
          Email：
          <input type="text" id="to-modify-email" class="form-control" placeholder="请输入Email" [(ngModel)]="toModifyEmail">
        </div>
        <div class="form-group form-inline">
          手机：
          <input type="text" id="to-modify-cellphone" class="form-control" placeholder="请输入手机号" [(ngModel)]="toModifyCellphone">
        </div>
        <div class="form-group form-inline">
          生日：
          <mat-input-container>
            <input id="to-modify-birthday" matInput [matDatepicker]="toModifyBirthdayPicker" [(ngModel)]="toModifyBirthday" placeholder="请选择日期"
              disabled>
          </mat-input-container>
          <mat-datepicker-toggle matSuffix [for]="toModifyBirthdayPicker"></mat-datepicker-toggle>
          <mat-datepicker #toModifyBirthdayPicker [touchUi]="'touch'" [startView]="'month'" disabled="false">
          </mat-datepicker>
        </div>
        <div class="form-group form-inline">
          性别：
          <mat-form-field>
            <mat-select id="to-modify-gender" [(ngModel)]="toModifyGender" placeholder="性别">
              <mat-option value="（未知）">
                （未知）
              </mat-option>
              <mat-option value="男">
                男
              </mat-option>
              <mat-option value="女">
                女
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="form-group form-inline">
          头像：
          <input type="text" id="to-modify-portrait-url" class="form-control" placeholder="请输入头像Url" [(ngModel)]="toModifyPortraitUrl">
        </div>
        <!--
        <div class="form-group form-inline">
          锁定：
          <select class="form-control" id="to-modify-gender" [(ngModel)]="toModifyIsLocked">
            <option value="false">否</option>
            <option value="true">是</option>
          </select>
        </div>
        // -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="modify()">修改</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="jobUserRolesModal" tabindex="-1" role="dialog" aria-labelledby="jobUserRolesModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width: 90%">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="jobUserRolesModalLabel">管理职位Roles</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div id="minLoading" class="loading">正在加载数据……</div>
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-icon" data-background-color="rose">
                  <i class="material-icons">assignment</i>
                </div>
                <div class="card-content">
                  <h4 class="card-title">{{userJobRolesUserName}}</h4>
                  <!-- Main row -->
                  <div class="box-header">
                    <div class="box-tools pull-right form-inline">
                      <span class="input-group hidden-xs hidden-sm" style="width:200px">
                        <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="minSearchKeywords">
                        <span class="input-group-btn">
                          <button class="btn btn-default btn-sm" type="button" (click)="clearMinKeywords()" data-container="body" data-toggle="popover"
                            data-trigger="hover" data-placement="top" data-content="清空关键词">
                            <i class="fa fa-eraser"></i>
                          </button>
                          <button class="btn btn-default btn-sm" type="button" (click)="displayMinData()" data-container="body" data-toggle="popover"
                            data-trigger="hover" data-placement="top" data-content="搜索">
                            <i class="fa fa-search"></i>
                          </button>
                        </span>
                      </span>
                      <button type="button" class="btn btn-info btn-sm" (click)="displayMinData()" data-container="body" data-toggle="popover"
                        data-trigger="hover" data-placement="top" data-content="刷新">
                        <i class="fa fa-refresh"></i>
                      </button>
                      <button *ngIf="showDeleteUserJobRoles" type="button" class="btn btn-danger btn-sm" (click)="toDeleteUserJobRoles()">删除选中角色</button>
                    </div>
                  </div>
                  <!-- /.box-header -->
                  <table class="table">
                    <thead class="text-primary">
                      <tr>
                        <th style="width:20px">
                          <input type="checkbox" (click)="checkAllUserJobRoles()" [(ngModel)]="checkedAllUserJobRoles">
                        </th>
                        <th (click)="minSort('userId')" [class.sorting]="minOrderBy!='userId'" [class.sorting_asc]="minOrderBy=='userId'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='userId'&&minOrderType=='desc'">用户id</th>
                        <th (click)="minSort('username')" [class.sorting]="minOrderBy!='username'" [class.sorting_asc]="minOrderBy=='username'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='username'&&minOrderType=='desc'">用户名</th>
                        <th (click)="minSort('realname')" [class.sorting]="minOrderBy!='realname'" [class.sorting_asc]="minOrderBy=='realname'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='realname'&&minOrderType=='desc'" class="hidden-xs">真实姓名</th>
                        <th (click)="minSort('nickname')" [class.sorting]="minOrderBy!='nickname'" [class.sorting_asc]="minOrderBy=='nickname'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='nickname'&&minOrderType=='desc'" class="hidden-xs hidden-sm">昵称</th>
                        <th (click)="minSort('email')" [class.sorting]="minOrderBy!='email'" [class.sorting_asc]="minOrderBy=='email'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='email'&&minOrderType=='desc'" class="hidden-xs hidden-sm">电子邮箱</th>
                        <th (click)="minSort('cellphone')" [class.sorting]="minOrderBy!='cellphone'" [class.sorting_asc]="minOrderBy=='cellphone'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='cellphone'&&minOrderType=='desc'" class="hidden-xs hidden-sm">手机</th>
                        <th (click)="minSort('isLocked')" [class.sorting]="minOrderBy!='isLocked'" [class.sorting_asc]="minOrderBy=='isLocked'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='isLocked'&&minOrderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                        <th class="hidden-xs hidden-sm hidden-md">所属集团</th>
                        <th class="hidden-xs hidden-sm hidden-md">组织机构</th>
                        <th class="hidden-xs hidden-sm hidden-md">职位</th>
                        <th class="hidden-xs hidden-sm hidden-md">角色</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let user of jobUserRoles">
                        <td style="width:20px">
                          <input type="checkbox" (click)="checkUserJobRole()" value="{{user.otherResults.id}}" class="job-list">
                        </td>
                        <td>{{user.userId}}</td>
                        <td>{{user.username}}</td>
                        <td class="hidden-xs">{{user.realname}}</td>
                        <td class="hidden-xs hidden-sm">{{user.nickname}}</td>
                        <td class="hidden-xs hidden-sm">{{user.email}}</td>
                        <td class="hidden-xs hidden-sm">{{user.cellphone}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.isLocked}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.groupName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.orgName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.positionName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.roleName}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <!-- /.box-body -->
                  <div class="box-footer clearfix no-border">
                    <div class="pull-right">
                      <app-pagination [pageNo]="minPageNo" [pageSize]="minPageSize" [totalPages]="minTotalPages" [total]="minTotal" (pageNoChange)="goToMinPage($event)"
                        (pageSizeChange)="setMinPageSize($event)"></app-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>